<template>
	<view class="nav-bar">
		<view :style="{height:statusBarHeight+'px'}"></view>
		<uni-nav-bar title="个人中心" background-color="#3274F9" color="#fff" :border="false" fixed="true"></uni-nav-bar>
	</view>
	
	<view class="user-info" :style="{marginTop:statusBarHeight+43+'px'}">
		<view class="flex-col" style="margin-left: 30rpx;margin-top: 30rpx;padding-bottom: 88rpx;">
			<view class="flex-row items-center">
				<text>张三</text>
				<view class="user-title">高级管理员</view>
			</view>
			<text style="margin-top: 20rpx;">17777777777</text>
		</view>
	</view>
	
	<view class="user-shop-option">
		<view class="flex-row items-center">
			<image src="/static/shop_logo.png" style="width: 100rpx;height: 100rpx;"></image>
			<text style="margin-left: 20rpx;">店铺名称店铺名称</text>
		</view>
		<view class="check-shop">切换店铺</view>
	</view>
	
	<view class="user-service">
		<view class="flex-row justify-between items-center" style="height: 100rpx;">
			<view class="flex-row items-center">
				<image src="/static/user/user_service_1.png" style="width: 50rpx;height: 50rpx;"></image>
				<text style="margin-left: 20rpx;">账号设置</text>
			</view>
			<uni-icons type="right" size="20"></uni-icons>
		</view>
		
		<view class="flex-row justify-between items-center" style="height: 100rpx;">
			<view class="flex-row items-center">
				<image src="/static/user/user_service_2.png" style="width: 50rpx;height: 50rpx;"></image>
				<text style="margin-left: 20rpx;">人员管理</text>
			</view>
			<uni-icons type="right" size="20"></uni-icons>
		</view>
		
		<view class="flex-row justify-between items-center" style="height: 100rpx;">
			<view class="flex-row items-center">
				<image src="/static/user/user_service_3.png" style="width: 50rpx;height: 50rpx;"></image>
				<text style="margin-left: 20rpx;">意见反馈</text>
			</view>
			<uni-icons type="right" size="20"></uni-icons>
		</view>
		
		<view class="flex-row justify-between items-center" style="height: 100rpx;" @click="logout">
			<view class="flex-row items-center">
				<image src="/static/user/user_service_4.png" style="width: 50rpx;height: 50rpx;"></image>
				<text style="margin-left: 20rpx;">退出登录</text>
			</view>
			
		</view>
	</view>
	
	<tab-bar :current-page='2'></tab-bar>
</template>

<script>
	import { useUserStore } from '@/store/userStore.js'
	export default {
		data() {
			return {
				statusBarHeight:0
			};
		},
		onLoad() {
			const info = uni.getSystemInfoSync();
			this.statusBarHeight = info.statusBarHeight;
		},
		methods:{
			logout(){
				useUserStore().setToken('')
				uni.reLaunch({
					url:'/pages/login/login'
				})
			}
		}
	}
</script>

<style lang="scss">
.user-info{
	display: flex;
	flex-direction: column;
	background-color: #3274F9;
	padding: 20rpx;
	color: #fff;
}
.user-title{
	border: 1rpx solid white;
	padding: 2rpx 10rpx;
	border-radius: 6rpx;
	margin-left: 30rpx;
	font-size: 23rpx;
}
.user-shop-option{
	background-color: #fff;
	border-radius: 15rpx;
	padding: 40rpx 30rpx;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	margin-left: 15rpx;
	margin-right: 15rpx;
	margin-top: -66rpx;
}
.check-shop{
	border: 1rpx solid #666666;
	padding: 3rpx 12rpx;
	color: #666666;
	font-size: 25rpx;
	border-radius: 35rpx;
}
.user-service{
	background-color: #fff;
	border-radius: 15rpx;
	padding: 20rpx 30rpx;
	display: flex;
	flex-direction: column;
	margin-left: 15rpx;
	margin-right: 15rpx;
	margin-top: 20rpx;
}
</style>
